import React from 'react';
import { Card, Form, Input, Breadcrumb, Space, DatePicker, Button } from 'antd'
import { post_map } from '../../utils/api2';
import { useNavigate } from 'react-router-dom';

function AddAnnun(props) {
    const { TextArea } = Input
    const push = useNavigate()
    const [form] = Form.useForm()
    const onChanges = (date, dateString) => {
        form.setFieldsValue({ time: dateString })
    }
    const onfinsh = (value) => {
        console.log(value)
        post_map(value).then((res) => {
            push('/index/outbreak')
            // console.log(res.data)
        })

    }
    const addlist = () => {
        form.submit()
    }
    return (
        <div>
            {/* 面包屑 */}
            <Breadcrumb className='yiqing'>
                <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
                <Breadcrumb.Item href='/index/outbreak'>疫情通告</Breadcrumb.Item>
                <Breadcrumb.Item>添加通告</Breadcrumb.Item>
            </Breadcrumb>
            {/* 卡片组件 */}
            <Card>
                <Form
                    onFinish={onfinsh}
                    form={form}
                >
                    <Form.Item
                        name="name"
                        label="主题"
                        rules={[{ required: true, message: '主题不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="context"
                        label="通知"
                        rules={[{ required: true, message: '通知不能为空' }]}
                    >
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item
                        name="people"
                        label="发布者"
                        rules={[{ required: true, message: '发布者不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="time"
                        label="时间"
                        rules={[{ required: true, message: '请选择修改时间' }]}
                    >
                        <Space direction="vertical" >
                            <DatePicker onChange={onChanges} />
                        </Space>
                    </Form.Item>
                    <Button style={{ width: '100%', background: 'green', color: 'white' }} onClick={addlist}>添加通告</Button>
                </Form>
            </Card>
        </div>
    );
}

export default AddAnnun;